<template>
  <div class="login_body">
    <!-- /代表piblic文件夹  @代表src文件夹 -->
    <!-- <img class="miaomiao" src="/miaomiao.png" alt=""> -->
    <img class="miaomiao" src="/miaomiao.jpg" alt="" />
    <!-- 相对路径写法 -->
    <!-- <img src="./../../../public/miaomiao.png" alt=""> -->
    <el-input
      class="un"
      v-model="un"
      placeholder="账户名/手机号/Email"
    ></el-input>
    <el-input
      class="pw"
      placeholder="请输入密码"
      v-model="pw"
      show-password
    ></el-input>
    <el-button class="elnext" type="danger" @click="loginHandler"
      >立即登录</el-button
    >
    <div class="login_link">
      <!-- <div><a href="#">立即注册</a></div> -->
      <router-link to="/mine/register" tag="div" class="register"
        >立即注册</router-link
      >
      <a href="#">找回密码</a>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      un: "",
      pw: "",
      uc: "",
    };
  },
  methods: {
    async loginHandler() {
      let res = await this.$axios.post("/user/login", {
        mobile: this.un,
        password: this.pw,
      });
      // console.log(res);
      if (res.data.nickname) {
        this.$message(
          {
            message: "登录成功",
            type: "success",
          },
          this.$router.push({
            path: "/mine/my",
          })
        );
        window.localStorage.setItem(
          "nickname",
          JSON.stringify(res.data.nickname)
        );
      } else {
        this.$message.error("账号或密码错误");
      }
    },
  },
};
</script>

<style scoped>
.miaomiao {
  width: 200px;
  height: 121px;
  margin: 20px auto;
}
#content .login_body {
  width: 100%;
}
.login_body .login_text {
  width: 100%;
  height: 40px;
  border: none;
  border-bottom: 1px #ccc solid;
  margin-bottom: 5px;
  outline: none;
  text-indent: 10px;
}
.login_body .login_btn {
  height: 50px;
  margin: 10px;
}
.login_body .login_btn input {
  width: 100%;
  height: 100%;
  background: #e54847;
  border-radius: 3px;
  border: none;
  display: block;
  color: white;
  font-size: 20px;
}
.login_body .login_link {
  display: flex;
  justify-content: space-between;
}
.login_body .login_link a {
  text-decoration: none;
  margin: 0 5px;
  font-size: 12px;
  color: #e54847;
  margin-top: 8px;
}
.login_body .login_link .register {
  text-decoration: none;
  margin: 0 5px;
  font-size: 12px;
  color: #e54847;
  margin-top: 8px;
}
.un {
  width: 100%;
  margin-top: 30px;
}
.pw {
  width: 100%;
  margin-top: 15px;
}
.uc {
  width: 50%;
  margin-top: 15px;
  margin-left: 3%;
}
.elnext {
  width: 100%;
  height: 50px;
  font-size: 18px;
  margin: 0 auto;
  margin-top: 15px;
}
</style>